import { h, ref, reactive } from 'vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import TableTags from '@/components/DataTable/tools/Tags.vue'
import TableSwitch from '@/components/DataTable/tools/Switch.vue'
import { DATA_PERMISSION, MENU_STATUS, ROLE_TYPE } from '@/utils/dictionary.js'
import { updateUserStatus, resetPwd } from '@/api/system/user.js'

/* 注册table */
const tableRef = ref()
const searchParams = ref()

function handleSearch(params) {
  searchParams.value = { ...params }
  tableRef.value.reFetch({ searchParams })
}

/**
 * @description: 改变状态
 * @param {*} row 选中数据
 * @return {*}
 */
function handleStatusChange(row) {
  updateUserStatus({ id: row.data.id, status: row.value })
    .then((res) => {
      if (res.code === 0) {
        handleSearch()
      }
    })
    .catch((e) => {
      console.log(e)
    })
}
function resetPassWord(id) {
  resetPwd(id)
    .then((res) => {
      if (res.code === 0) {
        handleSearch()
      }
    })
    .catch((e) => {
      console.log(e)
    })
}

/**
 * @description: 获取数据及操作
 * @param {*} row 单行数据
 * @param {*} type 操作类型 create:创建，preview:预览，edit:编辑
 * @return {*}
 */
function getRowData(row, type) {
  data.rowData = row || {}
  data.modalType = type
  data.modalShow = true
}

const data = reactive({
  tableRef,
  searchParams,
  rowData: {},
  modalType: 'create',
  modalShow: false,
  handleSearch,

  columns: [
    {
      title: '编号',
      key: 'key',
      render: (_, index) => {
        return `${index + 1}`
      },
      align: 'center',
      width: 50
    },
    {
      title: '用户姓名',
      key: 'realname',
      align: 'center',
      width: 120
    },
    // {
    //   title: '部门',
    //   key: 'deptName',
    //   align: 'center',
    //   ellipsis: {
    //     tooltip: true
    //   },
    //   width: 350
    // },
    {
      title: '手机号码',
      key: 'mobile',
      align: 'center',
      width: 200
    },
    {
      title: '角色',
      key: 'roleName',
      align: 'center',
      width: 100
      // render(row) {
      //   return h(TableTags, {
      //     data: row.type,
      //     filters: ROLE_TYPE
      //   })
      // }
    },
    // {
    //   title: '数据权限',
    //   key: 'dataPermission',
    //   align: 'center',
    //   width: 300,
    //   render(row) {
    //     return h(TableTags, {
    //       data: row.dataPermission,
    //       filters: DATA_PERMISSION
    //     })
    //   }
    // },
    {
      title: '用户账号',
      key: 'username',
      align: 'center',
      width: 300
    },
    {
      title: '状态',
      key: 'status',
      align: 'center',
      width: 100,
      render(row) {
        return h(TableSwitch, {
          data: { id: row.id, status: row.status },
          rowKey: 'status',
          checkedValue: 1,
          uncheckedValue: 2,
          onChange: handleStatusChange.bind(row)
        })
      }
    },
    {
      title: '编辑时间',
      key: 'updateTime',
      align: 'center',
      width: 300
    },
    {
      title: '操作',
      align: 'center',
      width: 200,
      fixed: 'right',
      render(row) {
        return h(TableAction, {
          actions: [
            {
              label: '详情',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'preview')
              },
              auth: 'system:user:preview'
            },
            {
              label: '编辑',
              type: 'button',
              props: {
                type: 'primary',
                text: true,
                onClick: getRowData.bind(null, row, 'update')
              },
              auth: 'system:user:edit'
            },
            {
              label: '重置密码',
              type: 'popconfirm',
              auth: 'system:user:reset',
              tip: '确定重置密码吗?',
              props: {
                onPositiveClick: resetPassWord.bind(null, [row.id])
              },
              ButtonProps: {
                text: true,
                type: 'primary'
              }
            }
            // {
            //   label: '删除',
            //   type: 'popconfirm',
            //   auth: 'basic_list',
            //   tip: '确定删除这个用户吗?',
            //   props: {
            //     // onPositiveClick: deleteData.bind(null, [row.id])
            //   },
            //   ButtonProps: {
            //     text: true,
            //     type: 'primary'
            //   }
            // }

          ],
          align: 'center'
        })
      }
    }
  ]
})

export default data
